<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-row :gutter="20">
                <el-col :span="18" :offset="0">
                    <el-button @click="removeRow" type="primary" size="mini" icon="el-icon-delete " circle></el-button>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2">
                    </el-input>
                </el-col>
            </el-row>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="文章标题" width="120">
                </el-table-column>
                <el-table-column prop="comments" label="留言内容" width="width">
                </el-table-column>
                <el-table-column prop="name" label="留言者" width="width">
                </el-table-column>
                <el-table-column prop="comments" label="关联用户(被回复)" width="width">
                </el-table-column>
                <el-table-column prop="comments" label="时间" width="width">
                </el-table-column>
                <el-table-column label="操作" width="width"  fixed="right" >
                    <!-- <template slot-scope="{row,$index}">
                        <el-button @click="fixRow(row)" type="primary" size="mini" circle icon="el-icon-edit-outline">
                        </el-button>
                        <el-button @click="removeRow(row)" type="warning" size="mini" circle icon="el-icon-delete">
                        </el-button>
                    </template> -->
                </el-table-column>
            </el-table>
            <!-- //paginamtion -->
            <el-pagination style="margin:10px 0 0 0;text-aglin:center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pageInfo.current" :page-sizes="[3, 5, 10]" :page-size="pageInfo.pageSize"
                layout="sizes, prev, pager, next" :total="pageInfo.totalItems">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {reqGetList} from '@/api/contentMessage'
export default {
    namne: '',
    data() {
        return {
            input2: "",
            dialogVisible: false,
            dialogVisible2: false,
            tableData: [],
            multipleSelection: [],
            pageInfo: {
                current: 1,
                pageSize: 10,
                searchkey: "",
                totalItems: 43,
                totalPage: 5
            },
            form: {
                alias: "",
                comments: "",
                name: "",
                date: "",
                id: "",
                url: "",
                __v: '',
                _id: "",
            },
            rules: {}
        }
    },
    mounted() {
        //挂载页面 
        this.getList()
    },
    methods: {
         //挂载页面 
      async  getList(){
        let result =  await reqGetList ()
         this.tableData =result.data.docs
         this.pageInfo =result.data.pageInfo
        },
        removeRow() {

        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
}
</script>

<style>
</style>